"use client";

import Link from "next/link";
import { ArrowRight, Heart, Brain, Activity, Shield, BookHeart, LineChart, Smartphone } from "lucide-react";
import { useAuth } from "@/contexts/auth-context";
import { useRouter } from "next/navigation";

// 修改名人名言数据
const quotes = [
  {
    content: "身体是革命的本钱，健康是人生的财富。"
  },
  {
    content: "生命在于运动，快乐在于健康。"
  },
  {
    content: "健康的身体是灵魂最好的居所。"
  }
];

export default function Home() {
  const { user } = useAuth();
  const router = useRouter();

  const handleAction = () => {
    if (user) {
      router.push("/dashboard");
    } else {
      router.push("/auth/register");
    }
  };

  return (
    <div className="flex flex-col items-center">
      {/* Hero Section - 添加动态背景 */}
      <section className="w-full py-24 md:py-32 lg:py-40 border-b relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary/10" />
        <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" />
        
        <div className="container px-4 md:px-6 relative">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
                心身同调·全维健康
              </h1>
              <p className="text-primary font-medium">Life Sync · Holistic Health</p>
            </div>
            <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
              用科技守护健康，用数据改善生活。全方位的健康数据管理与分析平台，助您掌握健康密码。
            </p>
            <div className="space-x-4">
              <button
                onClick={handleAction}
                className="inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90"
              >
                {user ? "进入控制台" : "开始使用"}
                <ArrowRight className="ml-2 h-4 w-4" />
              </button>
              <Link
                href="#features"
                className="inline-flex h-11 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
              >
                了解更多
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 名人名言轮播 */}
      <section className="w-full py-12 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {quotes.map((quote, index) => (
                <div 
                  key={index}
                  className="bg-background/80 backdrop-blur-sm p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
                >
                  <blockquote className="text-lg italic text-center">
                    "{quote.content}"
                  </blockquote>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Features Section - 添加动画效果 */}
      <section id="features" className="w-full py-12 md:py-24 lg:py-32 bg-accent/50">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                全方位的健康管理解决方案
              </h2>
              <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
                整合身心健康数据，提供专业的健康管理建议
              </p>
            </div>
          </div>
          <div className="mx-auto grid gap-10 sm:grid-cols-2 lg:grid-cols-4 mt-12">
            <div className="flex flex-col items-center space-y-4 p-6 bg-background rounded-lg shadow-lg">
              <Heart className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">健康数据管理</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                体重、血压、心率等健康指标的全面记录与追踪，科学分析健康趋势
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 p-6 bg-background rounded-lg shadow-lg">
              <Brain className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">心理健康追踪</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                情绪记录与分析，压力评估，为您的心理健康保驾护航
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 p-6 bg-background rounded-lg shadow-lg">
              <BookHeart className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">心路笔记</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                记录生活点滴，分享心路历程，构建健康生活方式
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4 p-6 bg-background rounded-lg shadow-lg">
              <Activity className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">设备集成</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                支持智能手表等设备数据同步，实时监测身体状况
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 健康小贴士 */}
      <section className="w-full py-12 md:py-24">
        <div className="container px-4 md:px-6">
          <h2 className="text-3xl font-bold text-center mb-12">每日健康小贴士</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-card rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <Heart className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold mb-2">规律作息</h3>
              <p className="text-muted-foreground">
                保持规律的作息时间，每天保证7-8小时的优质睡眠，是健康的基础。
              </p>
            </div>
            <div className="bg-card rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <Activity className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold mb-2">适度运动</h3>
              <p className="text-muted-foreground">
                每周进行3-5次中等强度的运动，每次30-60分钟，增强体质。
              </p>
            </div>
            <div className="bg-card rounded-xl p-6 shadow-lg hover:shadow-xl transition-all">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <Brain className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold mb-2">心理调节</h3>
              <p className="text-muted-foreground">
                保持积极乐观的心态，学会调节压力，培养健康的兴趣爱好。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section - 添加交互效果 */}
      <section className="w-full py-12 md:py-24 lg:py-32">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                为什么选择心身同调
              </h2>
              <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
                专业、全面、安全的健康管理平台
              </p>
            </div>
          </div>
          <div className="mx-auto grid gap-10 sm:grid-cols-2 lg:grid-cols-3 mt-12">
            <div className="flex flex-col items-center space-y-4">
              <LineChart className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">数据可视化</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                直观的数据展示，清晰的健康趋势分析
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4">
              <Smartphone className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">多端同步</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                支持多设备数据同步，随时随地管理健康
              </p>
            </div>
            <div className="flex flex-col items-center space-y-4">
              <Shield className="h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold">数据安全</h3>
              <p className="text-center text-gray-500 dark:text-gray-400">
                严格的数据加密与隐私保护机制
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section - 修改按钮逻辑 */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-primary relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center opacity-10 pointer-events-none" />
        <div className="container px-4 md:px-6 relative">
          <div className="flex flex-col items-center justify-center space-y-4 text-center text-primary-foreground">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                开启您的健康管理之旅
              </h2>
              <p className="mx-auto max-w-[700px] md:text-xl">
                {user ? "继续使用全维健康管理平台" : "立即注册，开始使用全维健康管理平台"}
              </p>
            </div>
            <div className="space-x-4">
              <button
                onClick={handleAction}
                className="inline-flex h-11 items-center justify-center rounded-md bg-primary-foreground px-8 text-sm font-medium text-primary shadow transition-colors hover:bg-primary-foreground/90 relative z-10"
              >
                {user ? "进入控制台" : "免费注册"}
                <ArrowRight className="ml-2 h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* 页脚信息 */}
      <footer className="w-full py-12 bg-background border-t">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <p className="text-muted-foreground">
              © 2024 心身同调·全维健康. All rights reserved.
            </p>
            <div className="flex space-x-4">
              <Link href="/docs" className="text-sm text-muted-foreground hover:text-primary">
                文档
              </Link>
              <Link href="/license" className="text-sm text-muted-foreground hover:text-primary">
                许可证
              </Link>
              <Link href="/contact" className="text-sm text-muted-foreground hover:text-primary">
                联系我们
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
